<template>
	<theme-box title="操作日志">
		<form class="form-inline"  @submit.prevent v-el:searchform>
				<form-date class="inline" label="&nbsp;开始日期:&nbsp;" name="beginTime" v-ref:begin></form-date>
				<form-date class="inline" label="&nbsp;结束日期:&nbsp;" name="endTime" v-ref:end></form-date>
				<v-button theme="warning" class="pull-right" @click="reset">重置</v-button>
			  <v-button theme="primary" class="pull-right" @click="search">查询</v-button>
		</form>		
		<div class="operate-table">
			<table class="table table-bordered table-striped" v-el:table>
			</table>
		</div>
	</theme-box>
</template>

<style scoped>
.operate-table .col-sm-5 {
	display: inline-block !important;
	width: auto !important;
}
.operate-table .col-sm-7 {
	display: inline-block !important;
	width: auto !important;
	float: right;
}
</style>
<style scoped>
	.form-inline .btn+.btn {
		margin-right: 10px;
	}
	
	.form-inline .form-group+.form-group {
		margin-left: 20px;
	}
</style>

<script>

	import { deepClone } from 'lib/clone.js';	
	import {dateFormat} from 'lib/method.js'

	let datatable;
	export default {
		data: () => ({
			dataSet: {
				data: [],
				recordsTotal: 0,
				recordsFiltered: 0
			},
			columnsSet: []
		}), 		
		methods: {
			  reset() {
					this.$els.searchform.reset();
					datatable.api().ajax.reload();
				},
				search() {
					datatable.api().ajax.reload();
				},
				setConfig() {
					//..加载配置
			   let columnsSet = [
						{ 
							title: "流水号",
							data: "txnNo",
							className: "item-id",
							readonly: true
						},
						{ 
							title: "操作时间",
							data: "txnDate",
							render:function (data) {
								return dateFormat(data)
							}
						},
						{ 
							title: "操作员",
							data:"operator"
						},
						{ 
							title: "操作用时",
							data:"operaTime",	

						},
						{ 
							title: "功能名称",
							data:"txnName",			
						},
						{ 
							title: "操作渠道",
							data:"txnChl",
							render: function (cellData) {
								if(cellData==0) {
									return ''
								}
								else if (cellData ==1){
									return '后台'
								}

							}						
						},										
						{ 
							title: "操作状态",
							data:"txnStatus",	
								render: function (cellData) {
								if(cellData==0) {
									return '正常'
								}
								else if (cellData ==1){
									return '错误'
								}

							}							
						},		
						{ 
							title: "错误信息",
							data:"txnError"		
						}					
      		];
					this.$set("columnsSet",columnsSet)
				},
				loadData(data = {}) {
					//..加载数据
					let self = this;
					return new Promise(function (resolve, reject) {
						self.$post({
							url: '/api/v1' + projectName_Url + '/sys/txnLog/query.html',
							data
						}).then( response => {	
							if (response) {								
								let content = response.content;
								self.dataSet.data = content.txnLogList;
								self.dataSet.recordsTotal = content.total;
								self.dataSet.recordsFiltered = content.total;
								return resolve();
							}
						}, response => {
							  return reject();
						});

					})
				},
				formatDate: function (value) {
					let date = new Date (value.replace(/-/g,"/"));
					let currentMonth = date.getMonth()+1+'';

					currentMonth = '00'.substr(0,2 - currentMonth.length)+currentMonth;

					let currentDate = date.getDate()+"";
					currentDate = '00'.substr(0,2 - currentDate.length)+currentDate;

					return ""+date.getFullYear()+currentMonth+currentDate;						
				}					
		},
		created() {
			this.setConfig();
		},
		ready() {
			let self = this;

			datatable = $(this.$els.table).dataTable({
				"columns": self.columnsSet,
				"paging": true,
				"pagingType": "full_numbers",
				"lengthChange": false,
				"searching": false,
				"ordering": false,
				"info": true,
				"autoWidth": false,
				"serverSide": true,
				"processing": true,
				"ajax": function (data, callback, settings) {

					let result = {};
					let _data = {};

					_data.aoData = JSON.stringify([{
						"name": "iDisplayStart",
						"value": 1 + data.start / data.length
									}, {
						"name": "iDisplayLength",
						"value": data.length
									}]);

					let start = self.$refs.begin.$els.date.value;
					if(start) {
						_data.beginDate = self.formatDate(start);
					}
					let end = self.$refs.end.$els.date.value;
					if(end) {
						_data.endDate = self.formatDate(end);
					} 

					self.loadData(_data).then(function () {
						result = self.dataSet;
						if (!result.data) {
							result.data = [];
						}
						callback(result);
					}, function () {
						result.data = [];
						callback(result);
					})

				},
				"fnDrawCallback": function( settings ) {
					let count = Math.ceil(settings._iRecordsTotal/settings._iDisplayLength);
					if(count<=1) {
						  $('.dataTables_paginate').hide();
					} else {
						  $('.dataTables_paginate').show();
					}
				}					

			});
		}
	}
</script>